<template>
	<view>
		<view class="searchBox">
			<image src="../../../static/images/cc/search.png" mode="widthFix" class="simg"></image>
			<input type="text" placeholder="您要去哪" class="scon" placeholder-class="name" />
		</view>
		<view class="box">
			<view class="heads">
				<view class="left">
					<image src="../../../static/images/cc/time.png" mode="widthFix" class="timg"></image>
					<view class="ls">历史记录</view>
				</view>
				<view class="cles">清空</view>
			</view>
			<view class="white">
				<view class="list" v-for="(item,index) in 5">
					<view class="names">地恒托斯卡纳四期</view>
					<view class="detail">
						<view class="address">黑龙江省哈尔滨市呼兰区利民大道</view>
						<view class="km">12km</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.searchBox {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.simg {
		width: 30rpx;
		height: 30rpx;
		margin-left: 37rpx;
		margin-right: 26rpx;
	}

	.scon {
		width: 560rpx;
		font-size: 26rpx;
		color: #3D3D3D;
	}

	.name {
		font-size: 26rpx;
		color: #999999;
	}

	.box {
		width: 690rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		margin-top: 28rpx;
		overflow: hidden;
	}

	.heads {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
		margin-left: 24rpx;
	}

	.timg {
		width: 30rpx;
		height: 30rpx;
	}

	.ls {
		font-size: 30rpx;
		margin-left: 16rpx;
	}

	.cles {
		font-size: 26rpx;
		color: #999999;
		margin-right: 24rpx;
	}

	.white {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #fff;
		/* margin-left: 28rpx; */
	}

	.list {
		width: 634rpx;
		height: 154rpx;
		border-bottom: 1px solid #D8D8D8;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.list:last-child {
		border: 0;
	}

	.names {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
	}

	.detail {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.address {
		font-size: 26rpx;
		color: #999999;
	}

	.km {
		font-size: 26rpx;
		color: #999999;
	}

	.border {
		border: 0;
	}
</style>